<template>
  <div class="wrap">
    <div class="main">
      <div class="major common">
        <p>全校专业报到率前六名</p>
        <ul class="item-wrap">
          <li class="item-box bold">
            <span class="ranking">排名</span>
            <span class="college-name">专业</span>
            <span class="college-proportion">报到率</span>
          </li>
          <li v-for="(item,index) in major"
              :key="index"
              class="item-box">
            <span class="ranking">{{index+1}}</span>
            <span class="college-name">{{item.majorAbbreviation}}</span>
            <span class="college-proportion">{{item.rate + "%"}}</span>
          </li>
        </ul>
      </div>
      <div class="arrive-number common">
        <p>当前时间</p>
        <div class="time">{{time}}</div>
        <p>当前报到人数</p>
        <countup :start-val="0"
                 :end-val="comersSum"
                 :duration="2"
                 tag="div"
                 class="animation"></countup>
      </div>
      <div class="proportion common">
        <p>各学院报到人数占比</p>
        <div id="showDataPie"
             style="width:100%; height:100%"></div>
      </div>
      <div class="report common">
        <p>各学院报到率</p>
        <div id="showDataBar"
             style="width:100%; height:100%"></div>
      </div>
      <div class="code-wrap common">
        <p>扫描二维码手机查看</p>
        <div class="code-box">
          <img src="../../static/img/true-code.png"
               alt="已报到人数"
               class="code-img">
        </div>
        <span class="copyright">技术支持&copy;三月软件小组</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comersSum: 0, //报到人数
      time: 0, //统计时间
      timer: 0,
      //表示其他学院报到率
      name: "其他",
      number: 0,
      major: [] //专业报到率
    };
  },
  mounted() {
    this.showRate();
    // 动态显示时间
    // setInterval(() => {
    //   this.getTime();
    // }, 1000);
    setInterval(() => {
      this.$router.go(0);
    }, 300000);
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
  methods: {
    //实时时间
    // getTime() {
    //   let date = new Date();
    //   let hour = date.getHours();
    //   let min = date.getMinutes();
    //   let sec = date.getSeconds();
    //   hour = hour < 10 ? "0" + hour : hour;
    //   min = min < 10 ? "0" + min : min;
    //   sec = sec < 10 ? "0" + sec : sec;
    //   date = hour + ":" + min + ":" + sec;
    //   this.time = date;
    // },
    // 请求报到人数
    getAllStatus() {
      this.axios({
        method: "get",
        url: "/student/getAllStatus"
      })
        .then(res => {
          if (res.data.code === 0) {
            this.comersSum = res.data.result.comersSum;
            this.time = res.data.result.time.slice(5, 16);
          }
          this.drawBar();
          this.drawPie();
          this.timer = setTimeout(this.showRate, 20000);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 专业报到率
    showCACRate() {
      this.axios({
        method: "get",
        url: "/student/showCACRate",
        params: {
          type: 1,
          sex: 0
        }
      })
        .then(res => {
          if (res.data.code === 0) {
            this.major = [];
            for (let i = 0; i < res.data.result.length; i++) {
              this.major.unshift(res.data.result[i]);
            }
            this.major = this.major.splice(0, 6);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 请求报到率
    showRate() {
      this.axios({
        method: "get",
        url: "/student/showRate",
        params: {
          type: 0
        }
      })
        .then(res => {
          if (res.data.code === 0) {
            this.allName = [];
            this.allRate = [];
            this.arriveNum = [];
            this.noArriveNum = [];
            for (let i = 0; i < res.data.result.length; i++) {
              this.allName.push(res.data.result[i].name.slice(0, 2));
              this.allRate.push(res.data.result[i].rate);
              this.arriveNum.push(res.data.result[i].arriveNum);
              this.noArriveNum.push(
                res.data.result[i].allNum - res.data.result[i].arriveNum
              );
            }
            this.showCACRate();
            this.getAllStatus();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    drawBar() {
      let myChart = this.echarts.init(document.getElementById("showDataBar"));
      let option = {
        grid: {
          containLabel: true,
          left: "5%",
          bottom: "17%",
          top: "5%",
          right: "5%"
        },
        xAxis: {
          type: "category",
          data: this.allName,
          axisLabel: {
            interval: 0,
            rotate: 0,
            textStyle: {
              fontSize: 20
            }
          }
        },
        yAxis: {
          type: "value",
          data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
          axisLabel: {
            interval: 0,
            fontSize: 16
          },
          splitLine: {
            show: false
          }
        },
        animationDuration: 1500,
        animationDurationUpdate: 1000,
        series: [
          {
            type: "bar",
            barWidth: 30,
            barGap: "80%",
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  let index = params.dataIndex;
                  let colorList = ["#2a5caa", "#37A2DA"];
                  if (index % 2 == 0) {
                    return colorList[0];
                  } else {
                    return colorList[1];
                  }
                }
              }
            },
            label: {
              // normal: {
              //   show: true,
              //   position: "inside",
              //   formatter: "{c} %",
              //   fontSize: 18
              // }
            },
            data: this.allRate
          }
        ]
      };
      myChart.setOption(option);
      // let autoWidth = 30;
      // let autoHeight = 100;
      // myChart.getDom().style.width = autoWidth + "vw";
      // myChart.getDom().style.height = autoHeight + "vh";
      // myChart.getDom().childNodes[0].style.width = autoWidth + "vw";
      // myChart.getDom().childNodes[0].style.height = autoHeight + "vh";
      // myChart.resize();
    },
    drawPie() {
      let myChart = this.echarts.init(document.getElementById("showDataPie"));
      let pieData = [];
      this.number = 0;
      for (let i = 0; i < this.allName.length; i++) {
        let pie_data = {};
        if (this.arriveNum[i] < this.comersSum / 10) {
          this.number += this.arriveNum[i];
        } else {
          pie_data.name = this.allName[i];
          pie_data.value = this.arriveNum[i];
        }
        pieData.push(pie_data);
      }
      let others = {
        name: this.name,
        value: this.number
      };
      pieData.push(others);
      let option = {
        animationDuration: 1500,
        animationDurationUpdate: 1000,
        series: [
          {
            type: "pie",
            radius: "52%",
            // radius: [25, 150],
            center: ["50%", "40%"],
            // roseType: "area",
            label: {
              fontSize: 16
            },
            labelLine: { length: 10 },
            data: pieData
          }
        ]
      };
      myChart.setOption(option);
      // let autoWidth = 32;
      // let autoHeight = 100;
      // myChart.getDom().style.width = autoWidth + "vw";
      // myChart.getDom().style.height = autoHeight + "vh";
      // myChart.getDom().childNodes[0].style.width = autoWidth + "vw";
      // myChart.getDom().childNodes[0].style.height = autoHeight + "vh";
      // myChart.resize();
    }
  }
};
</script>

<style scoped>
.wrap {
  background: #edf4f9;
}
.main {
  width: 90vw;
  height: calc(85vw / 3 * 2);
  /* width: 1500px;
  height: 1000px; */
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-around;
}
.common {
  width: 32%;
  height: 46%;
  background: #fff;
}
.common > p {
  margin: 2vh 0 0 2vh;
  padding-left: 1vh;
  border-left: 0.6vh solid #5d9bd8;
  font-size: 3.5vh;
  font-weight: bold;
  color: #666;
}
.major {
  width: 30%;
  height: 48%;
}
.item-wrap {
  margin-top: 3vh;
}
.item-box {
  display: flex;
  margin: 1.5vh 0;
  text-align: center;
  justify-content: space-evenly;
}
.bold {
  margin: 2vh 0;
  font-weight: bold;
}
.ranking {
  font-size: 2.8vh;
  min-width: 3vw;
}
.college-name {
  font-size: 2.8vh;
  min-width: 9vw;
}
.college-proportion {
  font-size: 2.8vh;
  min-width: 4vw;
}
.arrive-number {
  width: 34%;
  height: 48%;
}
.proportion {
  height: 48%;
}
.report {
  width: 66%;
  overflow: hidden;
}
.code-wrap {
  position: relative;
}
.code-box {
  width: 45%;
  height: 45%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
}
.code-img {
  width: 100%;
  height: 100%;
}
.time {
  margin-top: 1vh;
  font-size: 5vw;
  /* font-style: italic; */
  color: #588ce5;
  text-align: center;
}
.animation {
  margin-top: 1vh;
  font-size: 11vw;
  /* font-style: italic; */
  color: #588ce5;
  text-align: center;
}
.copyright {
  font-size: 2.5vh;
  position: absolute;
  bottom: 10px;
  left: 50%;
  font-weight: bold;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.copyright::before {
  content: "\2764";
  color: rgba(255, 0, 0, 0.6);
  position: relative;
  transition: 0.8s;
  left: -8px;
}
.copyright::after {
  content: "\2764";
  color: rgba(255, 0, 0, 0.6);
  position: relative;
  transition: 0.8s;
  right: -8px;
}
</style>